import React from "react";
import { useDispatch, useSelector } from "react-redux";
import "./toast.less";
import { hide } from "@/store/toastSlice";

export default function MyToast() {
  // type 可以是 success | err | warning
  const { content, show, type } = useSelector((state: any) => state.toastSlice);
  const dispatch = useDispatch();
  // 在组件内部，判断是否是 show 为true，如果为true，我们启动一个定时器，在n秒后隐藏掉
  if (show) {
    setTimeout(() => {
      dispatch(hide());
    }, 1500);
  }

  return (
    <div
      className={["toast", type].join(" ")}
      onClick={() => dispatch(hide())}
      style={{ top: show ? "20%" : "" }}
    >
      {content}
    </div>
  );
}
